<!doctype html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="chrome=1">
        <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
        <style type="text/css">
			html, body, .map {
				margin: 0;
				padding: 0;
				width: 100%;
				height: 100%;
			}
        </style>
        <script src="file:///android_asset/openlayer/ol.js" type="text/javascript"></script>
        <script src="file:///android_asset/sxkeda/js/marker.js" type="text/javascript"></script>
        <script src="file:///android_asset/sxkeda/js/debug.js" type="text/javascript"></script>
        <script src="file:///android_asset/sxkeda/js/dynamicData.js" type="text/javascript"></script>
        <script src="file:///android_asset/sxkeda/js/TrafficLight.js" type="text/javascript"></script>

        <title>OpenLayers map preview</title>
    </head>
    <body>
        <label id="teeeeest1">1233</label>
        <div id="wrapper">
            <div id="location"></div>
            <div id="scale"></div>
        </div>
        <div id="map" class="map"></div>
        <script type="text/javascript">
			var pureCoverage = false;
			// if this is just a coverage or a group of them, disable a few items,
			// and default to jpeg format

			var format = 'image/png';
			var bounds = [412.2908935546875, -3567.4348720330745, 3823.0429316796362, -511.80548095703125];
			if (pureCoverage)
			{
				document.getElementById('filterType').disabled = true;
				document.getElementById('filter').disabled = true;
				document.getElementById('antialiasSelector').disabled = true;
				document.getElementById('updateFilterButton').disabled = true;
				document.getElementById('resetFilterButton').disabled = true;
				document.getElementById('jpeg').selected = true;
				format = "image/jpeg";
			}

			var mousePositionControl = new ol.control.MousePosition(
			{
				className : 'custom-mouse-position',
				target : document.getElementById('location'),
				coordinateFormat : ol.coordinate.createStringXY(5),
				undefinedHTML : '&nbsp;'
			});
			var untiled = new ol.layer.Image(
			{
				source : new ol.source.ImageWMS(
				{
					ratio : 1,
					url : 'http://192.168.0.109:8080/geoserver/yanfabu_map/wms',
					params :
					{
						'FORMAT' : format,
						'VERSION' : '1.1.1',
						STYLES : '',
						LAYERS : 'yanfabu_map:yanfabu_map',
					}
				})
			});
			var tiled = new ol.layer.Tile(
			{
				visible : false,
				source : new ol.source.TileWMS(
				{
					url : 'http://192.168.0.109:8080/geoserver/yanfabu_map/wms',
					params :
					{
						'FORMAT' : format,
						'VERSION' : '1.1.1',
						tiled : true,
						STYLES : '',
						LAYERS : 'yanfabu_map:yanfabu_map',
					}
				})
			});

			var projection = new ol.proj.Projection(
			{
				code : 'EPSG:54012',
				units : 'm',
				axisOrientation : 'neu'
			});

			var iconFeature = new ol.Feature(
			{
				geometry : new ol.geom.Point([1569, -1259]),
				name : 'Null Island',
				population : 4000,
				rainfall : 500
			});

			var iconStyle = new ol.style.Style(
			{
				image : new ol.style.Icon(/** @type {olx.style.IconOptions} */(
					{
						anchor : [0.5, 46],
						anchorXUnits : 'fraction',
						anchorYUnits : 'pixels',
						opacity : 0.75,
						src : 'resource/icon/icon.png'
					}))
			});

			iconFeature.setStyle(iconStyle);

			var vectorSource = new ol.source.Vector(
			{
				features : [iconFeature]
			});

			var vectorLayer = new ol.layer.Vector(
			{
				source : vectorSource
			});


			var map = new ol.Map(
			{
				controls : ol.control.defaults(
				{
					attribution : false
				}).extend([mousePositionControl]),
				target : 'map',
				layers : [untiled, tiled,vectorLayer],
				view : new ol.View(
				{
					projection : projection,
					// center: [100, -100],
					// zoom: 5
				})
			});
			map.getView().on('change:resolution', function(evt)
			{
				debug.i("change:resolution");
				var resolution = evt.target.get('resolution');
				var units = map.getView().getProjection().getUnits();
				var dpi = 25.4 / 0.28;
				var mpu = ol.proj.METERS_PER_UNIT[units];
				var scale = resolution * mpu * 39.37 * dpi;
				if (scale >= 9500 && scale <= 950000)
				{
					scale = Math.round(scale / 1000) + "K";
				}
				else
				if (scale >= 950000)
				{
					scale = Math.round(scale / 1000000) + "M";
				}
				else
				{
					scale = Math.round(scale);
				}
				document.getElementById('scale').innerHTML = "Scale = 1 : " + scale;
			});
			map.getView().fit(bounds, map.getSize());
			map.on('singleclick', function(evt)
			{
				debug.d("singleclick");
				// document.getElementById('nodelist').innerHTML = "Loading... please wait...";
				var view = map.getView();
				var viewResolution = view.getResolution();
				var source = untiled.get('visible') ? untiled.getSource() : tiled.getSource();
				var url = source.getGetFeatureInfoUrl(evt.coordinate, viewResolution, view.getProjection(),
				{
					'INFO_FORMAT' : 'text/html',
					'FEATURE_COUNT' : 50
				});

				if (url)
				{
					// document.getElementById('nodelist').innerHTML = '<iframe seamless src="' + url
					// + '"></iframe>';
				}
			});

			// sets the chosen WMS version
			function setWMSVersion(wmsVersion)
			{
				map.getLayers().forEach(function(lyr)
				{
					lyr.getSource().updateParams(
					{
						'VERSION' : wmsVersion
					});
				});
			}

			// Tiling mode, can be 'tiled' or 'untiled'
			function setTileMode(tilingMode)
			{
				if (tilingMode == 'tiled')
				{
					untiled.set('visible', false);
					tiled.set('visible', true);
				}
				else
				{
					tiled.set('visible', false);
					untiled.set('visible', true);
				}
			}

			function setAntialiasMode(mode)
			{
				map.getLayers().forEach(function(lyr)
				{
					lyr.getSource().updateParams(
					{
						'FORMAT_OPTIONS' : 'antialias:' + mode
					});
				});
			}

			// changes the current tile format
			function setImageFormat(mime)
			{
				map.getLayers().forEach(function(lyr)
				{
					lyr.getSource().updateParams(
					{
						'FORMAT' : mime
					});
				});
			}

			function setStyle(style)
			{
				map.getLayers().forEach(function(lyr)
				{
					lyr.getSource().updateParams(
					{
						'STYLES' : style
					});
				});
			}

			function setWidth(size)
			{
				var mapDiv = document.getElementById('map');
				var wrapper = document.getElementById('wrapper');

				if (size == "auto")
				{
					// reset back to the default value
					mapDiv.style.width = null;
					wrapper.style.width = null;
				}
				else
				{
					mapDiv.style.width = size + "px";
					wrapper.style.width = size + "px";
				}
				// notify OL that we changed the size of the map div
				map.updateSize();
			}

			function setHeight(size)
			{
				var mapDiv = document.getElementById('map');
				if (size == "auto")
				{
					// reset back to the default value
					mapDiv.style.height = null;
				}
				else
				{
					mapDiv.style.height = size + "px";
				}
				// notify OL that we changed the size of the map div
				map.updateSize();
			}

			function updateFilter()
			{
				if (pureCoverage)
				{
					return;
				}
				var filterType = document.getElementById('filterType').value;
				var filter = document.getElementById('filter').value;
				// by default, reset all filters
				var filterParams =
				{
					'FILTER' : null,
					'CQL_FILTER' : null,
					'FEATUREID' : null
				};
				if (filter.replace(/^\s\s*/, '').replace(/\s\s*$/, '') != "")
				{
					if (filterType == "cql")
					{
						filterParams["CQL_FILTER"] = filter;
					}
					if (filterType == "ogc")
					{
						filterParams["FILTER"] = filter;
					}
					if (filterType == "fid")
						filterParams["FEATUREID"] = filter;
				}
				// merge the new filter definitions
				map.getLayers().forEach(function(lyr)
				{
					lyr.getSource().updateParams(filterParams);
				});
			}

			function resetFilter()
			{
				if (pureCoverage)
				{
					return;
				}
				document.getElementById('filter').value = "";
				updateFilter();
			}

			// shows/hide the control panel
			function toggleControlPanel()
			{
				var toolbar = document.getElementById("toolbar");
				if (toolbar.style.display == "none")
				{
					toolbar.style.display = "block";
				}
				else
				{
					toolbar.style.display = "none";
				}
				map.updateSize()
			}

			//handleDynamicData(map);
			// handleTrafficLight(map);
        </script>
    </body>
</html>
